<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"></meta>
    <title th:text="'分类' + ${category != null?'修改':'新增'}"></title>
    <meta name="description" content="个人后台管理系统"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>

    <link rel="stylesheet" type="text/css" href="/css/main.css"></link>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>
</head>
<body class="app sidebar-mini rtl">
<!-- Navbar-->
<div th:replace="common/html/back::header"></div>
<!-- Sidebar menu-->
<div th:replace="common/html/back::sidebar"></div>
<main class="app-content">
    <div class="app-title">
        <div>
            <h1><i class="fa fa-plus-circle"></i> 新增分类</h1>
            <p>new article</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item">博客管理</li>
            <li class="breadcrumb-item">分类管理</li>
            <li class="breadcrumb-item">新增分类</li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <form id="categoryForm" class="form-horizontal" th:action="${category == null}?'/back/category/add':'/back/category/update'" method="post">
                        <input type="hidden" th:if="${category != null}" name="id" th:value="${category != null}?${category.id}"></input>
                        <div class="form-group row">
                            <label class="control-label col-md-1">分类名称</label>
                            <div class="col-md-4">
                                <input name="categoryName" class="form-control" type="text" placeholder="分类名称" th:value="${category != null}?${category.categoryName}"></input>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-1">分类描述</label>
                            <div class="col-md-4">
                                <input name="description" class="form-control" type="text" placeholder="分类描述" th:value="${category != null}?${category.description}"></input>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="control-label col-md-1">上级分类</label>
                            <div class="col-md-4">
                                <input id="pid" name="pid" type="hidden" th:value="${category != null}?${category.pid}">
                                <input id="pName" name="pName" class="form-control" type="text" placeholder="一级分类" readonly="readonly" th:value="${category != null && category.parentCategory != null}?${category.parentCategory.categoryName}" onclick="parentCategoryPanel()"></input>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-1 control-label">排序号</div>
                            <div class="col-md-4">
                                <input type="number" class="form-control" name="sort" placeholder="排序号" th:value="${category != null}?${category.sort}"/>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="tile-footer">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-3">
                            <button class="btn btn-primary" type="button" onclick="javascript:$('#categoryForm').submit();"><i class="fa fa-fw fa-lg fa-check-circle"></i>提交</button>&nbsp;&nbsp;&nbsp;<a class="btn btn-secondary" href="#" onclick="javascript:history.back();"><i class="fa fa-fw fa-lg fa-times-circle"></i>返回</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearix"></div>
        <!-- 选择上级分类 -->
        <div id="parentCategory" style="display:none;padding:10px;">
            <ul>
                <div class="radio" th:each="val: ${topCategory}">
                    <label>
                        <input type="radio" name="options" th:value="${val.id}" th:text="${val.categoryName}"></input>
                    </label>
                </div>
            </ul>
        </div>
    </div>
</main>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="/js/main.js"></script>
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script th:inline="javascript">
        function parentCategoryPanel(){
            layer.open({
                type:1,
                //offset:'50px',
                skin:'layui-layer-molv',
                title:'选择分类',
                area: ['300px', '450px'],
                shade:0.3,
                shadeClose:true,
                content:$("#parentCategory"),
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    var pNode = $("#parentCategory input[name='options']:checked");
                    //alert();
                    $("#pName").val(pNode[0].nextSibling.nodeValue);
                    $("#pid").val(pNode.val());
                    layer.close(index);
                }
            });
        }
</script>
</body>
</html>